<template>
  <view>
    <view class="search_center">
      <!-- 搜索框 -->
      <u-search placeholder="输入商品名"
                v-model="inputVal"
                focus
                animation
                @change="$u.debounce(getGoodListFn, 1000)"
                @search="handleSearch()"
                @custom="handleSearch()"
                margin="10rpx"
                :action-style="searchBtnStyle"></u-search>
    </view>
    <!-- 搜索列表 -->
    <GoodsList :goods_list="goods_list" />
    <!-- 空状态 -->
    <u-empty margin-top="50"
             :show="emptyShow"
             mode="search"></u-empty>
  </view>
</template>

<script>
import GoodsList from '@/components/SearchList.vue'
export default {
  components: {
    GoodsList,
  },
  computed: {
    emptyShow() {
      return this.goods_list.length === 0
    },
  },
  data() {
    return {
      inputVal: '', //用来存放输入框的值
      goods_list: [],
      searchBtnStyle: {
        width: '101rpx',
        height: '61rpx',
        display: 'flex',
        'align-items': 'center',
        'justify-content': 'center',
        'background-color': '#ea4350',
        'border-radius': '8rpx',
        color: 'white',
        'font-size': '25rpx',
        marginLeft: '10rpx',
      },
    }
  },
  methods: {
    handleSearch() {
      //判断输入商品名称是否为空
      if (!this.inputVal.trim()) return this.$u.toast('输入商品名称不能为空')
      this.getGoodListFn()
    },
    async getGoodListFn() {
      if (!this.inputVal.trim()) return false
      //请求后台拿数据
      const res = await this.$u.api.getSearchListAPI({
        query: this.inputVal.trim(),
      })
      this.goods_list = res
    },
  },
}
</script>

<style scoped>
.search_center {
  margin-bottom: 15rpx;
  padding-top: 15rpx;
}

.search_center .search_input {
  margin-top: 15rpx;
  margin-left: 18rpx;
  width: 599rpx;
  height: 61rpx;
  border-radius: 27rpx;
  display: flex;
  align-items: center;
  background-color: #e7e7e7;
}

.search_center .search_btn {
  width: 101rpx;
  height: 61rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ea4350;
  border-radius: 8rpx;
  margin-top: 15rpx;
  margin-left: 15rpx;
  color: white;
  font-size: 25rpx;
}
</style>
